<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息页</title>
    <%@ include file="/web/header.jsp" %>
</head>
<body>

<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">员工信息-查询条件</h2>
       
        <div class="layui-colla-content layui-show">
            <fieldset class="layui-elem-field" style="margin: 10px;">
                <legend>员工信息-查询条件</legend>
                <div class="layui-field-box">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">员工编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" placeholder="请输入员工编号" autocomplete="off"
                                       class="layui-input"/>
                            </div>
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入姓名" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <label class="layui-form-label"></label>     
                            <span>
                                <input type="button" value="查询" class="layui-btn layui-btn-sm" lay-submit
                                       lay-filter="search">
                                <input type="reset" value="重置" class="layui-btn layui-btn-primary layui-btn-sm">
                                <input type="button" value="添加" class="layui-btn layui-btn-sm" onclick="openAdd()">
                            </span>

                        </div>
                        <input type="hidden" name="action" value="page"/>
                        <input type="hidden" name="pageIndex" value="1"/>
                        <input type="hidden" name="pageLimit" value="10"/>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<table class="layui-table">
    <colgroup>
        <col width="15%">
        <col width="15%">
        <col width="10%">
        <col width="10%">
        <col width="15%">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>部门编号</th>
        <th>部门名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="user_tbody">

    </tbody>
</table>

<div id="pageInfo" style="text-align: right;padding-right: 30px;"></div>

<script>
    element.render();
    refresh();
    
    function openAdd() {
        layerOpen("/web/page/employee/add.jsp", refresh);
    }

    function openUpd(code) {
        layerOpen("/web/page/employee/upd.jsp?code="+code, refresh);
    }
    
    function refresh() {
        $("input[type='reset']").click();
        $("input[value='查询']").click();
    }
    

    function del(code) {
		layerConfirm(function() {
			ajax("/EmployeeServlet", {
				code : code,
				action : 'del'
			}, 'text', function(data) {
				console.log(data)
				
					layer.msg("删除成功", refresh)
				
				
			})
		},"是否删除该条记录？")
	}

    function resetPass(code) {
        layerConfirm(function () {
            ajax("/EmployeeServlet", {action: "resetPass", code: code}, 'text', function (data) {
                    if (data == 1)
                        layer.msg("密码已重置")
                    else
                        layer.msg("重置失败")
                }
            )
        },"是否确定重置")
    }

    function openDept(code) {
        layerOpen("/web/page/employee/setDept.jsp?code="+code, refresh);
    }

    function openPic(code) {
        layerOpen("/web/page/employee/userPic.jsp?code=" + code, refresh);
    }

    function updPass(code) {
    	
        layer.prompt({formType: 1, title: '请输入新密码'}, function (value, index, elem) { // 有输入效果的弹出框
            ajax("/EmployeeServlet", {action: "updPass", code: code, pass: value}, "text", function (data) {
                if (data == 1) { 
                    layer.msg("密码已修改");
                    layer.close(index);
                } else {
                    layer.msg("修改密码失败");
                }
            })
        });
    }

    formOnSubmit("search", "/EmployeeServlet", "json", function (data) {
        // 1. 分页控件的渲染
        console.log("1")
        var curr = $("input[name='pageIndex']").val();
        var limit = $("input[name='pageLimit']").val();
        pageInfo("pageInfo", data.count, curr, limit, function (obj, first) {
            $("input[name='pageIndex]").val(obj.curr);
            $("input[name='pageLimit']").val(obj.limit);
            if (!first){ refresh();}
        })

        // 2. 展示表格中的数据
        var html = ''; // 将要放入表格中的html（用模板引擎渲染获得）
        var tpl = $("#tradd").html(); // 获得模板引擎
        // 遍历data中的对象
        // console.log(data.list)
        $.each(data.list, function (i, dom) { // i=下标，dom=对象
            // todo 下面三行为什么要进行这种判断？
            var name = dom.name ? dom.name : '';
            var codeDept = dom.codeDept ? dom.codeDept : "";
            var nameDept = dom.nameDept ? dom.nameDept : "";
            var d = {
                id: (i + 1) + (curr - 1) * limit,
                code: dom.code,
                name: name, 
                codeDept: codeDept,
                nameDept: nameDept
            }
            html += laytpl(tpl).render(d) 
        })
        $("#user_tbody").html(html);
        layer.msg("查询成功", {time: 500})
    });
	
</script>
<script type="text/html" id="tradd">
    <tr>
        <td>{{d.id}}</td>
        <td>{{d.code}}</td>
        <td>{{d.name}}</td>
        <td>{{d.codeDept}}</td>
        <td>{{d.nameDept}}</td>
        <td>
            <a href="javascript:del('{{d.code}}')" class="layui-btn layui-btn-sm layui-btn-danger">
                               <i class="layui-icon layui-icon-delete"></i>
            </a>
            <a href="javascript:openUpd('{{d.code}}')" class="layui-btn layui-btn-sm">修改 </a>
            <input type="button" class="layui-btn layui-btn-xs" value="重置密码" onclick="resetPass('{{d.code}}')">
            <input type="button" class="layui-btn layui-btn-xs" value="修改密码" onclick="updPass('{{d.code}}')">
            <input type="button" class="layui-btn layui-btn-xs" value="设置部门" onclick="openDept('{{d.code}}')">
            <input type="button" class="layui-btn layui-btn-xs" value="上传头像" onclick="openPic('{{d.code}}')">
        </td>
    </tr>
</script>
</body>
</html>
